// 1. 查询参数对象
const params = {
  // 商品名称
  query: '',
  // 商品分类的编号
  cid: 5,
  // 页码
  pagenum: 1,
  // 页面显示条数
  pagesize: 10,
  // 总页数
  totalpage: 0,
  // 总条数
  total: 0,
  // 商品列表
  goods: [],
}
// 定时器的编号
let id = 0

// 2. 初始化页面
$(function () {
  // 2-1. 初始化页面数据
  init()
  // 2-2. 监听窗口滚动事件
  $(window).scroll(scroll)
  // 2-3. 点击返回顶端
  $('.icon-fanhuidingbu1').click(backtop)
  // 2-4. 监听下拉刷新
  pullDownRefresh()
})

// 3. 初始化函数
async function init() {
  try {
    // 3-1. 请求商品列表
    let goods = await getGoods()
    // 3-2. 渲染数据
    renderGoods(goods)
    // 3-3. 初始化wow
    initWow()
    // 3-4. 加载可见的图片
    lazyLoad()
  } catch (error) {}
}

// 4. 请求商品列表函数
async function getGoods() {
  // 4-1. 准备参数
  let opt = {
    url: 'goods/search',
    data: {
      query: params.query,
      cid: params.cid,
      pagenum: params.pagenum,
      pagesize: params.pagesize,
    },
  }
  // 4-2. 发起请求获得结果
  try {
    let res = await request(opt)
    // 判断是否请求成功
    if (res.meta.status !== 200) {
      return console.log(res.meta.msg)
    }
    // 请求成功保存数据到param对象中
    params.goods = res.message.goods
    params.total = res.message.total
    params.totalpage = Math.ceil(params.total / params.pagesize)
    return res.message.goods
  } catch (error) {
    // 程序报错返回空数组
    return []
  }
}

// 5. 渲染函数
function renderGoods(goods) {
  console.log(goods)
  // 5-1. 判断参数是否合法
  if (!goods || !Array.isArray(goods)) {
    return console.log('参数必须是数组')
  }
  // 5-2. 遍历数组
  let goodsList = $('.goods-list')
  goods.forEach((item) => {
    let src = item.goods_small_logo
    if (!src) {
      src = 'https://web17.oss-cn-hangzhou.aliyuncs.com/404.jpg'
    }
    let li = `
      <li class="wow slideInLeft" >
        <div class="avatar">
          <img src="./img/img_loading.gif" real_src="${src}" class="lazy" />
        </div>
        <div class="info">
          <div class="name">${item.goods_name}</div>
          <div class="price">￥${item.goods_price}</div>
        </div>
      </li>
    `
    goodsList.append(li)
  })
}

// 6. 初始化wow
function initWow() {
  new WOW({
    boxClass: 'wow', //WOW.js需要执行动画的元素的class
    animateClass: 'animated', //animation.css 动画的 class
    offset: 0, //距离可视区域多少开始执行动画
    mobile: true, //是否在移动设备上执行动画
    live: true, //异步加载的内容是否有效
  }).init()
}

// 7. 返回顶端函数
function backtop() {
  if (id) {
    clearInterval(id)
  }
  id = setInterval(function () {
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    let top = Math.floor(-scrollTop / 7)
    document.documentElement.scrollTop = document.body.scrollTop = top + scrollTop
    if (scrollTop === 0) {
      clearInterval(id)
    }
  }, 30)
}

// 8. 监听窗口滚动事件
function scroll() {
  // 1. 获得滚动高度
  let scrollTop = $(this).scrollTop()
  // 2. 判断返回顶端元素是否显示
  scrollTop > 200 ? $('.icon-fanhuidingbu1').show() : $('.icon-fanhuidingbu1').hide()
  // 3. 获得视口的高度
  let clientHeight = document.documentElement.clientHeight
  // 4. 获得文档html高度
  let height = $('html').height()
  console.log(scrollTop, clientHeight, height)
  // 加载下一页
  if (height === scrollTop + clientHeight) {
    console.log('到底了')
    params.pagenum++
    if (params.pagenum <= params.totalpage) {
      init()
    } else {
      // 判断当前页码是否超出总页数
      console.log('当前页码是：' + params.pagenum)
      alert('已经是最后一页了')
    }
  }
  // 5. 监听当前图片的懒加载
  lazyLoad()
}

// 9. 获得当前元素到页面顶端的距离
function getOffsetTop(el) {
  // el到最近的定位父级元素的top距离
  let top = el.offsetTop
  // 获得el的父级定位元素，如果存在对offsetTop进行累加
  while ((el = el.offsetParent)) {
    top += el.offsetTop
  }
  // 返回top值
  return top
}

// 10. 图片懒加载
function lazyLoad() {
  let scrollTop = $(window).scrollTop()
  let clientHeight = document.documentElement.clientHeight
  $('.lazy').each((index, item) => {
    let top = getOffsetTop(item)
    // 滚动距离+视口高度>图片距离文档顶端的距离时，图片进入可视区域，渲染真实图片
    if (scrollTop + clientHeight + 100 > top) {
      // 获得图片的真实路径
      let realSrc = item.getAttribute('real_src')
      // 创建一个图片对象
      let img = new Image()
      // 监听img的加载事件
      img.onload = function () {
        // 判断图片资源是否加载结束
        if (img.complete) {
          // 图片资源从服务器加载结束了，item开始替换src和realSrc
          item.src = realSrc
          item.className = ''
          item.removeAttribute('real_src')
        }
      }
      // 知道图片的加载路径
      img.src = realSrc
    }
  })
}

// 11. 下拉刷新
function pullDownRefresh() {
  //1.获取到列表的dom，刷新显示部分的dom，列表父容器的dom
  let container = document.querySelector('.goods-list')
  let refreshText = document.querySelector('.refreshText')
  let parent = document.querySelector('.parent')
  //2.定义一些需要常用的变量
  let startY = 0 //手指触摸最开始的Y坐标

  //3.给列表dom监听touchstart事件,得到起始位置的Y坐标
  parent.addEventListener('touchstart', function (e) {
    startY = e.touches[0].pageY
  })
  //4.给列表dom监听touchmove事件，当移动到一定程度需要显示上面的文字
  parent.addEventListener('touchmove', function (e) {
    if (isTop() && e.touches[0].pageY - startY > 0) {
      refreshText.style.height = '50px'
      parent.style.transform = 'translateY(50px)'
      parent.style.transition = 'all ease 0.5s'
      refreshText.innerHTML = '释放立即刷新...'
    }
  })
  //5.给列表dom监听touchend事件，此时说明用户已经松开了手指，应该进行异步操作了
  parent.addEventListener('touchend', function (e) {
    if (isTop()) {
      refreshText.innerHTML = '正在刷新...'
      // ul容器
      container.innerHTML = ''
      params.pagenum = 1
      // 重新加载数据
      init()
      // 2s后隐藏元素
      setTimeout(function () {
        parent.style.transform = 'translateY(0)'
        console.log('成功刷新')
      }, 2000)
    }
    return
  })

  // 是否返回顶端了
  function isTop() {
    var t = document.documentElement.scrollTop || document.body.scrollTop
    return t === 0 ? true : false
  }
}
